<template>
  <div class="box">
    <h2>子组件 sub</h2>
    从父组件中获取的值:{{$store.state.num}}
    <!-- 
        直接使用vuex中的公共数据
    -->
    <p> 计算属性 msg:{{msg}} getA:{{getA}} num:{{num}} </p>
    <!-- 
        映射使用 格调高点
        mapState映射使用
        把vuex中的公共数据引入组件中 映射为计算属性 ...mapState(['msg'])
     -->
    <br>
    <button @click="Sub1">值-1</button>
    <button @click="Sub20">值-20</button>
  </div>
</template>
<style lang="css">
  .box{
    border:1px solid #ccc;
    width:200px;
    padding:5px;
    margin: 20px;
  }
</style>
<script>
import { mapState, mapMutations } from 'vuex' // 按需加载
export default {
  name: 'SubItem',
  computed: {
      ...mapState(['msg']), // mapState(['msg'])是一个函数 ...是复制过来函数 copy功能
      getA(){
          return "a"
      },
      ...mapState(['num'])
  },
  methods: {
      Sub1(){
          this.$store.commit('mSub1', 1) // 不需要传参数
        //   每次调用vue调试工具都会检测到
        //   this.$store.state.num = this.$store.state.num*1 - 1
          // 这种方式可以直接改值，不推荐 过程无法被记录
      },
      // 映射方式 映射为方法 格调高
      ...mapMutations(['mSubn', 'mSub1']),
      // 映射重名改名字
      ...mapMutations({newF1: 'f1'}),
      Sub20 () {
          this.mSubn(20)
          this.newF1()
      }
  }
}
</script>
